<!-- pages/components/input/input.vue -->
<template>
    <view class="wrapper">
        <view class="title">1. 基本用法 (v-model)</view>
        <input class="my-input" v-model="username" placeholder="请输入用户名" />
        <view class="result-small">
            你输入的是：{{username}}
        </view>
        
        <view class="title">2. 密码输入框 (type="password")</view>
        <input class="my-input" v-model="password" type="password" placeholder="请输入密码" />

        <view class="title">3. 数字输入框 (type="number")</view>
        <input class="my-input" v-model="age" type="number" placeholder="请输入年龄" />

    </view>
</template>

<script>
    export default {
        data() {
            return {
                username: '',
                password: '',
                age: null
            }
        }
    }
</script>

<style>
.wrapper {
    padding: 15px;
}
.title {
    font-size: 16px;
    font-weight: bold;
    padding: 10px 0;
    margin-top: 10px;
}
.my-input {
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 0 10px;
    background-color: #fff;
}
.result-small {
    margin-top: 10px;
    padding: 5px;
    font-size: 14px;
    color: #666;
}
</style>